<template>
  <ul>
    <li v-for="userInfo in userList" :key="userInfo.id">
      ID：{{userInfo.id}}，
      姓名：{{userInfo.name}}，
      性别：{{userInfo.sex==1?'男':'女'}}
      状态：
      <template v-if="userInfo.status==0">禁用</template>
      <template v-else-if="userInfo.status==1">启用</template>
      <template v-else-if="userInfo.status==2">已废弃</template>
    </li>
  </ul>
</template>
<script setup lang="ts">
import { ref } from 'vue';

/**
 * 定义用户信息结构
 */
interface UserInfo {
  id: number,
  name: string,
  sex: number, // 1为男，2为女,
  status: number // 0：禁用；1启用；2:已废弃
}
const userList = ref<Array<UserInfo>>([{
  id: 1,
  name: '张三',
  sex: 1,
  status: 0
},{
  id: 2,
  name: '李四',
  sex: 1,
  status: 1
},{
  id: 3,
  name: '李蓝',
  sex: 2,
  status: 2
}])
</script>